<template>
  <div>
    <!-- 客服详情 -->
    <el-form :inline="true" :model="form" ref="form" class="form-style">
      <el-row style="border-bottom:1px solid #eee">
        <el-col>
          <el-form-item style="margin:15px 0 15px 30px" prop="name">
            <el-input v-model="form.name" placeholder="客服名称"></el-input>
          </el-form-item>
          <el-form-item style="margin:15px 0 15px 30px">
            <el-button icon="el-icon-refresh" type="warning" @click="clean('form')">重置</el-button>
            <el-button icon="el-icon-search" type="primary">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button style="margin:15px 0 15px 30px" type="success" @click="add">添加客服</el-button>
    </el-form>
    <div class="table-style">
      <el-table border :data="tableData">
        <el-table-column prop="num" label="序号"></el-table-column>
        <el-table-column prop="name" label="客服名称"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column label="操作" width="450">
            <template slot-scope="">
                <el-button size="mini" type="success">分配团长</el-button>
                <el-button size="mini" type="primary">详情</el-button>
                <el-button size="mini" type="warning" @click="edit">编辑</el-button>
                <el-button size="mini" type="danger">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :pageSize="pageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @pageSizeChange="pageSizeChange"
      />
    </div>
    <service-dialog 
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :formData="form"
      />
    <!-- <share-dialog
      :dTitle="dialogTitle"
      :visible="dialogFormVisible"
      @closeDialog="close"
      :formData="form"
      /> -->
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import ServiceDialog from "./ServiceDialog";
import ShareDialog from "./ShareDialog";
export default {
  methods: {
    // go(type) {
    //   this.dialogFormVisible = true;
    //   this.dialogTitle = "分配团长";
    //   this.form = {};
    //   console.log(type)
    // },
    add() {
      this.dialogFormVisible = true;
      this.dialogTitle = "新增客服";
      this.form = {};
    },
    edit() {
      this.dialogFormVisible = true;
      this.dialogTitle = "客服编辑";
      // this.form = { ...row };
    },
    close(reload) {
      console.log(reload);
      this.dialogFormVisible = false;
      if ( reload === 'reload' ) {
        console.log(reload)
      }
    },
    clean(form) {
      this.$refs[form].resetFields()
    },
    currentChange(val) {
      this.currentPage = val;
    },
    pageSizeChange(val) {
      this.pageSize = val;
    },
  },
  data() {
    return {
      type:'',
      dialogTitle:"",
      dialogFormVisible:false,
      currentPage: 1,
      pageSize: 10,
      total: 1,
      form: {},
      tableData: [
          {"num":1,"name":"abc","phone":"1232131123"}
      ],
    };
  },
  components: {
    Botpage,
    ServiceDialog,
    ShareDialog
  },
};
</script>

<style>
</style>